import React, { Component,Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux, Route ,Link} from 'dva/router';
import {
    Button, Menu, Dropdown, Icon, Row, Col,
    Input, InputNumber,
    Steps, Card, Popover, Badge, Table, Tooltip, Divider,
    Checkbox, Modal, Radio,Collapse,
    Select, message,Cascader,
    Form, Upload, Spin, DatePicker
} from 'antd';
import styles from './ChoiceOrg.less';
import DescriptionList from '../../components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const { Description } = DescriptionList;
const FormItem = Form.Item;
const Panel = Collapse.Panel;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

@connect(({ }) => ({

}))

@Form.create()
export default class ChoiceOrg extends Component {
    onChange(value) {
        console.log(value);
    }

    options = [
        {
        value: 'HB',
        label: '湖北',
            children: [
                {
                    value: 'WH',
                    label: '武汉',
                }
            ],
        }, 
        {
        value: 'SD',
        label: '山东',
            children: [
                {
                    value: 'HF',
                    label: '潍坊',
                }
            ],
        }
    ];

    renderSimpleForm(){
        const { getFieldDecorator } = this.props.form;  
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={8} sm={24}>
                        <FormItem label="机构名称">
                            {getFieldDecorator('orgName')(<Input placeholder="请输入" />)}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="所属区域">
                            <Cascader options={this.options} onChange={this.onChange} placeholder="请选择   " />
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <span className={styles.submitButtons}>
                            <Button type="primary" onClick={this.handleSearch}>
                                查询
                                </Button>
                            <Button style={{ marginLeft: 10 }} onClick={this.handleFormReset}>
                                重置
                                </Button>
                        </span>
                    </Col>
                </Row>
            </Form>
        );
    }

    columns = [
        {
            title: '机构编号',
            dataIndex: 'orgNum',
            key:'orgNum',
        },
        {
            title: '机构名称',
            dataIndex: 'orgName',
            key:'orgName',
        },
        {
            title: '所属区域',
            dataIndex: 'province',
            key:'province',
        },
        {
            title: '所在地',
            dataIndex: 'city',
            key:'city',
        },
        {
            title: '操作',
            dataIndex: 'state',
            key: 'id',
            render: (text, record) => (
              <Fragment>
                <a>选择</a>
              </Fragment>
            ),
        }
    ];

    data = [
        {
            key:'1',
            orgNum:'ICBC-001',
            orgName:'湖北武汉车买买汽车销售有限公司',
            province:'湖北省',
            city:'武汉市',
        },
        {
            key:'2',
            orgNum:'ICBC-002',
            orgName:'湖北襄阳大丰起汽车销售有限公司',
            province:'湖北省',
            city:'襄阳市',
        },
        {
            key:'3',
            orgNum:'ICBC-003',
            orgName:'湖北咸宁德星行有限公司',
            province:'湖北省',
            city:'咸宁市',
        },
    ];

    render() {
        return(
            <PageHeaderLayout>
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderSimpleForm()}
                        </div>
                        <Table
                            dataSource={this.data}
                            columns={this.columns}
                            rowKey="id"
                        />
                    </div>
                </Card>
            </PageHeaderLayout>
        );
    }
}